import { Layout, Menu } from 'antd';
import React, { useState } from 'react';
const { Header, Content, Footer } = Layout;
import styled from 'styled-components';
import ProjectList from '../project';
import ProjectDetail from '../project/detail';
import BundleList from '../bundle';
import { Route, Switch, useHistory, useRouteMatch, Redirect } from 'react-router-dom';
import { MenuInfo } from 'rc-menu/lib/interface';
import AudioText from '../../components/audioText';
import clickMp3 from '../../assets/audio/flying_pan.mp3';


const Container = styled.div`
    width: 100%;
    height: 100%;
    display: flex;
`;

export default function DashBoard() {
    let { path, url } = useRouteMatch();
    let history = useHistory();
    const [status, setStatus] = useState({});

    const handleMenu = (info: MenuInfo) => {
        history.push(`${path}${info.key}`);
    }

    return (
        <Container>
            <Layout style={{ width: '100%', height: '100%' }}>
                <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
                    <div className="logo" />
                    <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['/project']} onClick={handleMenu}>
                        <Menu.Item key="/project">Project</Menu.Item>
                        <Menu.Item key="/bundle">Bundle</Menu.Item>
                    </Menu>
                </Header>
                <Content className="site-layout" style={{ padding: '0 50px', marginTop: 64 }}>
                    <Switch>
                        <Route path={`${path}/project/detail`}>
                            <ProjectDetail />
                        </Route>
                        <Route path={`${path}/project`}>
                            <ProjectList />
                        </Route>
                        <Route path={`${path}/bundle`}>
                            <BundleList />
                        </Route>
                        <Redirect from={path} to={`${path}/project`} />
                    </Switch>

                </Content>
                <Footer style={{ textAlign: 'center' }}>Bundle Cloud ©2021 Created by <AudioText text='Hanxiaoxin' audio={clickMp3} /></Footer>
            </Layout>
        </Container>
    );
};